<template>
	<view class="main-page">
		<u-navbar title="车辆管理" :autoBack="false" leftIcon=" " placeholder></u-navbar>
		<view class="search-container">
			<u-search v-model="keywords" shape="round" placeholder="搜索车型/车牌号" :clearabled="true" :showAction="false" @search="search"></u-search>
			<view class="search-container-right">
				<u-icon name="plus-circle-fill" size="28" color="#ffa70a" @tap="toAdd()"></u-icon>
			</view>
		</view>
		<view class="cars-container">
			<view class="loading" v-if="loading">
				<u-loading-icon></u-loading-icon>
			</view>
			<view class="cars-container-items">
				<carList :datas="car_lists"></carList>
			</view>
			<u-empty mode="search" v-if="car_lists.length == 0"></u-empty>
		</view>
	</view>
</template>

<script>
	import { appInit, carLists } from '@/common/api.js'
	import carList from '@/components/car_list.vue';
	
	export default {
		components:{
			carList
		},
		data() {
			return {
				limit: 100,
				page: 1,
				keywords: '',
				car_lists: [],
				loading: false
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1;
			this.getCarList();
		},
		methods: {
			getCarList(){
				this.loading = true;
				carLists({limit: this.limit, page: this.page,  keywords: this.keywords}).then(res => {
					this.car_lists = res.list;
					this.loading = false;
				})
			},
			search() {
				this.page = 1;
				this.getCarList();
			},
			toAdd() {
				uni.navigateTo({
					url: '/pages/home/carEdit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-container { 
		padding: 25rpx 15rpx; display: flex; justify-content: space-between;
		&-right {
			padding-left: 15rpx;
		}
	}
	.loading { padding-bottom: 15rpx; }
</style>
